<template>
  <div id="register">
    <c-title :hide="false" text="注册"></c-title>
    <div class="wrapper">
      <div class="tips">
        <span class="left-tips"></span>
        <span class="tips-text">申请信息</span>
      </div>
      <div>
        <van-form>
          <van-field required v-model="info.name" name="姓名：" label="姓名：" placeholder="请输入您的姓名" maxlength="10" />
          <van-field required v-model="info.mobile" name="手机号：" type="number" maxlength="11" label="手机号：" placeholder="请输入手机号" />
          <van-field required label-width="100px" readonly clickable name="picker" :value="info.identity_card_type" label="请选择证件类型" placeholder="请选择证件类型" @click="showPicker = true" />
          <van-field required v-model="info.identity_card_no" maxlength="20" name="证件号：" label="证件号：" placeholder="请输入证件号" />
          <van-field required readonly clickable name="picker" :value="info.gender" label="请选择性别" placeholder="请选择性别" @click="showSex = true" />
          <van-field required readonly clickable name="picker" :value="info.birthday" label="请选择出生日期" placeholder="请选择出生日期" @click="showBirth = true" />
          <van-field required label="身份证人像面" readonly></van-field>
          <div class="card">
            <van-uploader v-model="identity_card_front" :after-read="onRead_2" :max-count="1" :deletable="true">
              <img src="../../../assets/images/card_reverse.png" alt="" />
              <div v-if="!info.identity_card_front" class="photo-upload">
                <img style="width:50%" src="../../../assets/images/camera.png" alt="" />
              </div>
            </van-uploader>
          </div>
          <van-field required label="身份证国徽面" readonly> </van-field>
          <div class="card">
            <van-uploader v-model="identity_card_backend" :after-read="afterRead" :max-count="1" :deletable="true">
              <img src="../../../assets/images/card_front.png" />
              <div class="photo-upload" v-if="!info.identity_card_backend">
                <img style="width:50%" src="../../../assets/images/camera.png" alt="" />
              </div>
            </van-uploader>
          </div>
          <div class="register_type" v-if="register_type_list.length > 0">
            <div class="register_type_all">
              <van-checkbox v-model="checked" shape="square" @click="checkAllHandle">全部注册</van-checkbox>
            </div>
            <van-checkbox-group v-model="register_type" direction="horizontal" ref="checkboxGroup" @change="change">
              <van-checkbox v-for="item in register_type_list" :key="item" :name="item" shape="square">{{ item == 1 ? "银行卡、支付宝" : "公众号" }}</van-checkbox>
            </van-checkbox-group>
          </div>
          <div class="agreement"><van-checkbox v-model="agree">我已阅读并同意</van-checkbox><span class="served-agreement" @click="show_agreement = true">《服务协议》</span></div>
          <div style="margin: 16px;">
            <van-button round block type="info" :disabled="btn_disabled" :loading="btn_loading" :loading-text="btn_loading_text" color="#F00B0B" @click="onSubmit">提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
    <!-- 证件号类型 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
    <!-- 出生日期  -->
    <van-popup v-model="showBirth" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @cancel="showBirth = false" title="选择年月日" :min-date="minDate" :max-date="maxDate" @confirm="confirmBirth" />
    </van-popup>
    <!-- 性别  -->
    <van-popup v-model="showSex" position="bottom">
      <van-picker show-toolbar :columns="sexList" @confirm="onConfirmGender" @cancel="showPicker = false" />
    </van-popup>
    <!-- 协议 -->
    <van-popup class="box" v-model="show_agreement">
      <div class="agreement-wrapper" v-html="desc"></div>
      <div class="agreement-close">
        <van-icon name="close" @click="show_agreement = false" />
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btn_loading: false,
      btn_disabled: false,
      btn_loading_text: "提交中..",
      checked: true,
      register_type: [], //注册支付类型
      register_type_list: [],
      showPicker: false,
      agree: false,
      columns: ["居民身份证", "港澳居民来往内地通行证", "台胞证"],
      identity_card_front: [],
      identity_card_backend: [],
      show_agreement: false, //显示协议
      showSex: false, //性别
      showBirth: false, //出生日期
      info: {
        name: "",
        mobile: "",
        identity_card_no: "",
        identity_card_type: "",
        identity_card_front: "",
        identity_card_backend: "",
        gender: "",
        birthday: ""
      },
      //性别
      sexList: ["男", "女"],
      //日期
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 11, 31),
      currentDate: new Date(),
      redirect: false,
      //协议文本
      desc: ""
    };
  },
  activated() {
    this.init();
    this.getData();
    this.checkAllHandle();
  },
  methods: {
    init() {
      this.identity_card_front = [];
      this.identity_card_front = [];
      this.info.name = "";
      this.info.mobile = "";
      this.info.identity_card_no = "";
      this.info.identity_card_type = "";
      this.info.identity_card_front = "";
      this.info.identity_card_backend = "";
      this.info.gender = "";
      this.info.birthday = "";
    },
    change(names) {
      names.length == 2 ? (this.checked = true) : (this.checked = false);
    },
    checkAllHandle() {
      if (this.$refs.checkboxGroup) {
        this.checked ? this.$refs.checkboxGroup.toggleAll(true) : this.$refs.checkboxGroup.toggleAll(false);
      }
    },
    getData() {
      $http.get("plugin.worker-withdraw.frontend.register.page", { register_type: this.$route.params.register_type_Id }).then(res => {
        if (res.result == 1) {
          this.desc = res.data.desc;
          let data = res.data.register_data;
          let register_type = res.data.register_type;
          if (data) {
            this.info.name = data.name;
            this.info.mobile = data.mobile;
            this.info.identity_card_no = data.identity_card_no;
            this.info.identity_card_front = data.identity_card_front;
            this.info.identity_card_backend = data.identity_card_backend;
            this.info.birthday = data.birthday;
            if (data.identity_card_type == "1") {
              this.info.identity_card_type = "居民身份证";
            } else if (data.identity_card_type == "2") {
              this.info.identity_card_type = "港澳居民来往内地通行证";
            } else {
              this.info.identity_card_type = "台胞证";
            }
            if (res.data.gender == 0) {
              this.info.gender = "女";
            } else {
              this.info.gender = "男";
            }
            this.identity_card_front.push({ url: data.identity_card_backend_url });
            this.identity_card_front.push({ url: data.identity_card_front_url });
          }
          if(this.checked){
            this.register_type = [1,2]
          }
          if (register_type.length !== 0) {
            this.register_type_list = register_type;
          }
        }
      });
    },
    confirmBirth(value) {
      let date = new Date(value);
      let years = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      this.info.birthday = `${years}-${month}-${day}`;
      this.showBirth = false;
    },
    afterRead(e) {
      this.uploadRead(e, "identity_card_backend");
    },
    onRead_2(e) {
      this.uploadRead(e, "identity_card_front");
    },
    uploadRead(e, type) {
      let fd = new FormData();
      fd.append("file", e.file);
      this[type][0].status = "uploading";
      this[type][0].message = "上传中...";
      axios.post(this.fun.getRealUrl("upload.uploadPic"), fd, { headers: { "Content-Type": "multipart/form-data" } }).then(res => {
        if (res.data.result == 1) {
          this[type][0].status = "done";
          this.$toast(res.data.msg);
          this.info[type] = res.data.data.img_url;
        } else {
          this[type][0].status = "failed";
          this.$toast(res.data.msg);
        }
      });
    },
    onSubmit() {
      if (!this.agree) {
        return this.$toast("请勾选服务协议");
      }
      if (this.flag_type && this.register_type.length <= 0) {
        return this.$toast("请选择注册类型");
      }
      let json = {
        name: this.info.name,
        mobile: this.info.mobile,
        identity_card_no: this.info.identity_card_no,
        identity_card_front: this.info.identity_card_front,
        identity_card_backend: this.info.identity_card_backend,
        birthday: this.info.birthday,
        register_type: this.register_type.length == 2 ? [-1] : this.checked ? [-1] : this.register_type
      };
      this.info.gender == "男" ? (json.gender = 1) : (json.gender = 0);
      this.info.identity_card_type == "居民身份证"
        ? (json.identity_card_type = 1)
        : this.info.identity_card_type == "港澳居民来往内地通行证"
        ? (json.identity_card_type = 2)
        : (json.identity_card_type = 3);
      let text = {
        name: "请输入姓名",
        mobile: "请输入手机号",
        identity_card_type: "请选择身份证类型",
        identity_card_no: "请输入证件号",
        gender: "请选择性别",
        birthday: "请选择出生日期",
        identity_card_front: "请上传身份证(人像面)",
        identity_card_backend: "请上传身份证(国徽面)"
      };
      for (const key in text) {
        if (this.info[key] == "") {
          return this.$toast(text[key]);
        }
      }
      if (this.info.mobile.length < 11) {
        return this.$toast("请输入正确的手机号");
      }
      let reg = /^[\u4e00-\u9fa5]{2,6}$/;
      if (!reg.test(this.info.name)) {
        return this.$toast("请输入真实姓名");
      }
      this.btn_loading = true;
      this.btn_loading_text = "正在提交...";
      this.btn_disabled = true;
      $http.post("plugin.worker-withdraw.frontend.register.index", json).then(res => {
        this.btn_disabled = false;
        this.btn_loading_text = "";
        this.btn_loading = false;
        if (res.result == 1) {
          this.$toast(res.msg);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    onConfirm(value) {
      this.info.identity_card_type = value;
      this.showPicker = false;
    },
    onConfirmGender(value) {
      this.info.gender = value;
      this.showSex = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.agreement {
  margin: 10px 0;
  display: flex;
  .served-agreement {
    color: #f00b0b;
  }
}
.box {
  background-color: unset;
}
.tips {
  text-align: left;
}
.m-2-0-1 {
  margin: 2rem 0 1rem;
}
.p-1-0 {
  margin: 1rem 0;
}
.register_type {
  display: flex;
  margin: 1rem 0;
  .register_type_all {
    margin-right: 0.2rem;
  }
}
.card {
  position: relative;
  text-align: left;
  padding: 10px 16px;
  background-color: #fff;

  img {
    width: 13.5rem;
  }
  .photo-upload {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4.14rem;
    height: 4.14rem;
    border-radius: 100px;
    opacity: 0.8;
    text-align: center;
    line-height: 5.14rem;
    background-color: #108ee9;
  }
}
#register {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  background-color: #fff;
  .wrapper {
    padding: 1rem;
    width: 100%;
  }
  .left-tips {
    display: inline-block;
    width: 0.2493rem;
    height: 0.8rem;
    background-color: #f14e4e;
    border-radius: 2px;
    margin-right: 0.2613rem;
  }
  .tips-text {
    font-size: 1.15rem;
    color: #f14e4e;
  }
}
.agreement-wrapper {
  background-color: #fff;
  position: relative;
  width: 90vw;
  height: 86vh;
  padding: 0.5rem;
  overflow-y: auto;
}
.agreement-close {
  height: 10vh;
  line-height: 10vh;
  text-align: center;
  .van-icon {
    font-size: 2rem;
    color: #fff;
  }
}
</style>
